别忘了点赞!

我们将创建一个 lambda 函数,该函数生成一个预签名的 url 以及一个使用非常酷的组件库的反应前端!

传统上,上传文件可能有点难以实施和管理。幸运的是,AWS 允许您使用预签名的 url 将对象直接上传到 S3 存储桶。预签名的网址带有到期日期,因此您需要在此之前开始上传,否则访问会被阻止。

该项目基本上分为两个部分。前端和后端。

前往 github 获取代码。

我们将使用 CloudFormation 和 AWS SAM 来创建和部署我们的 Lambda 函数以及创建我们的 S3 存储桶。该函数在调用时将为我们生成预签名的 url。您也可以在自己的 API 中轻松托管此代码。

首先,确保您已安装和配置 aws-cli 和 aws-sam-cli(设置您的密钥和区域等)。这是这个的方法。

一切准备就绪后,您需要做的就是从 lambda 函数的根文件夹中运行sam build,然后运行sam deploy --guided。 SAM cli 将指导您完成部署,一旦成功,您将拥有一个新创建的 S3 存储桶和 lambda 函数。

确保复制 lambda 函数的 api gateway url,因为您需要在Upload.js组件中进行一些小的更改。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ZVDIf5ps--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/skwuehzo0kd2jf8u1re1.png)

使用您的 API 端点更新Upload.js组件。

进入全屏模式 退出全屏模式

在此之后,只需从前端文件夹中运行yarn和yarn start,您最终应该会得到一个看起来像这篇文章的英雄形象中的页面。

在本教程中,我使用了一个非常棒的组件库,称为 React-uploady。具体来说,我结合了它的上传按钮、拖放和进度组件。但是您可以添加其他几个。看看吧!

当您选择要上传的文件时,系统会请求检索预签名的 url,一旦返回,上传就开始了。挺甜的。

希望这可以帮助!